(function($){
	$.fn.j_rotateMouble = function (json){
		if(!(json instanceof Object)){
			alert("数据格式错误");
			return false;
		}
		var string = "<div class='frameUl clearfix'><ul class='clearfix'></ul></div>";
		var idName = $(this).attr("id");
		var imgWidth = json.width,imgHeight = json.height,showNum = json.showNum,list = json.list;
		var len = list.length;
		var ulWidth = len*imgWidth;
		var cssText = "#"+idName+"{width:"+imgWidth+"px;height:"+imgHeight+"px;position:relative;overflow:hidden;}";
		//li中的样式
		cssText += "#"+idName+" ul{width:"+ulWidth+"px;height:"+imgHeight+"px;overflow:hidden;}";
		cssText += "#"+idName+" li{width:"+imgWidth+"px;height:"+imgHeight+"px;overflow:hidden;float:left}";
		cssText += "#"+idName+" .sequence{position:absolute;right:5px;bottom:5px;}";
		cssText += "#"+idName+" .sequence a{margin:0 5px;padding:3px 6px;border-radius:4px;background:rgb(153,153,153);color:white;font-family:'arial';display:inline-block;border:1px solid #d1d1d1;}";
		cssText += "#"+idName+" .sequence .sel{background:rgb(204,0,0)}";

		var STYLE = document.createElement('style');
		STYLE.setAttribute("type", "text/css");
		STYLE.styleSheet && (STYLE.styleSheet.cssText = cssText) || STYLE.appendChild(document.createTextNode(cssText));
		document.getElementsByTagName('head')[0].appendChild(STYLE);
		
		var $string = $(string);
		var $ul = $string.find("ul");
		var liString = "<li><a target='_blank'><img width='"+imgWidth+"px' height='"+imgHeight+"px'/></a></li>";
		var sequence = "<div class='sequence'>";
		for (var i=0;i<len; i++){
			var obj = list[i];
			var $li = $(liString);
			$li.find("a").attr("href",obj.imgLink);
			$li.find("img").attr("src",obj.url);
			$ul.append($li);
			if(i==0) sequence+="<a target='_blank' class='sel' title='"+obj.name+"'>"+(i+1)+"</a>";
			else sequence+="<a target='_blank' title='"+obj.name+"' >"+(i+1)+"</a>";
		}
		sequence += "</div>";
		$(this).append($string);
		$(this).append(sequence);
		function _rotateModule(index){						
			var _left =  (index-1)*imgWidth;
			$ul.css("marginLeft",-_left);
			var $sel = $("#"+idName).find(".sequence .sel");
			if(index==$sel.html()){
				return false;
			}
			$sel.removeClass("sel");
			$("#"+idName).find(".sequence a").eq(index-1).addClass("sel");
			$ul.fadeTo(0,0,function (){
				$ul.fadeTo(500,1);
			});
		}
		$(this).find(".sequence a").bind("mouseover",function (){
			_isrun = false;
			var index = $(this).html();
			index = parseInt(index,10);
			_rotateModule(index);
			
			return false;
		});

		var rotate  = document.getElementById(idName);
		$(this).find(".sequence a").bind("mouseout",function (event){
			var event = EventUtil.getEvent(event);	
			if(rotate.contains(event.relatedTarget)){
				_isrun = false;
				$ul.fadeTo(0,1,function (){
					$(this).stop(true,false);
				});
				if(rotateTimeout) clearTimeout(rotateTimeout);
			} 
			return false;
		});

		
		$(this).find(".sequence a").click(function (){
			return false;
		});


		var _isrun = true;
		function _fnSequenceMouble(){
			if(!_isrun) return false;
			var $sel = $("#"+idName).find(".sequence .sel");
			var index = $sel.html();
			index = parseInt(index,10);
			if(index<len) _rotateModule(index+1);
			else _rotateModule(1);
			
			if(_isrun){
				$ul.fadeTo(0,1,function (){
					$(this).stop(true,false);
				});
				rotateTimeout = window.setTimeout(_fnSequenceMouble,5000);
			}
		}
		$ul.fadeTo(0,1,function (){
			$(this).stop(true,false);
		});
		var rotateTimeout = window.setTimeout(_fnSequenceMouble,5000);
		$(this).mouseover(function (){
			_isrun  = false;
			$ul.fadeTo(0,1,function (){
					$(this).stop(true,false);
				});
			if(rotateTimeout) clearTimeout(rotateTimeout);
		});
		$(this).mouseout(function (event){
			var event = EventUtil.getEvent(event);	
			if(this.contains(event.relatedTarget)){
				$ul.fadeTo(0,1,function (){
					$(this).stop(true,false);
				});
				if(rotateTimeout) clearTimeout(rotateTimeout);
				return false;
			}else if(!_isrun){
				_isrun  = true;
				$ul.fadeTo(0,1,function (){
					$(this).stop(true,false);
				});
				rotateTimeout = window.setTimeout(_fnSequenceMouble,5000);
			}
		});
	};
})(jQuery);